<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        .app-container {
            display: flex;
            height: 100vh;
        }

        .app-aside {
            background: #2d3a4b;
            padding: 0;
            height: 100vh;
            color: white;
        }

        .app-menu {
            height: 100%;
        }

        .app-header {
            background: #409EFF;
            color: white;
            text-align: center;
            line-height: 60px;
            height: 60px;
        }

        .app-main {
            padding: 20px;
            overflow: auto;
        }

        .statistic-item {
            display: inline-block;
            width: 23%;
            margin-right: 1%;
            margin-bottom: 20px;
        }

        #gender-chart {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="app" class="app-container">
    <!-- 左侧导航栏 -->
    <el-aside width="200px" class="app-aside">
        <el-menu class="app-menu" :default-openeds="['1']">
            <el-submenu index="1">
                <template slot="title">菜单</template>
                <el-menu-item index="1-1">仪表盘</el-menu-item>
                <el-menu-item index="1-2">设置</el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>

    <!-- 右侧操作区域 -->
    <el-container>
        <el-header class="app-header">后台管理系统</el-header>
        <el-main class="app-main">
            <!-- 数据统计 -->
            <div class="statistic-item">
                <el-card>
                    <h3>用户数</h3>
                    <p>{{ statistics.users }}</p>
                </el-card>
            </div>
            <div class="statistic-item">
                <el-card>
                    <h3>公告数</h3>
                    <p>{{ statistics.announcements }}</p>
                </el-card>
            </div>
            <div class="statistic-item">
                <el-card>
                    <h3>问答数</h3>
                    <p>{{ statistics.queries }}</p>
                </el-card>
            </div>
            <div class="statistic-item">
                <el-card>
                    <h3>图书数量</h3>
                    <p>{{ statistics.books }}</p>
                </el-card>
            </div>
            <!-- 男女比例饼图 -->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>男女占比</span>
                </div>
                <div id="gender-chart"></div>
            </el-card>
            <!-- 操作 -->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>操作</span>
                </div>
                <el-table :data="tableData" style="width: 100%;" stripe border>
                    <el-table-column prop="date" label="日期" width="180"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                </el-table>
                <el-form ref="form" :model="form" label-width="120px" style="margin-top: 20px;">
                    <el-form-item label="姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="地区">
                        <el-select v-model="form.region" placeholder="请选择地区">
                            <el-option label="区域一" value="region1"></el-option>
                            <el-option label="区域二" value="region2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>
    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                statistics: {
                    users: 350,
                    announcements: 12,
                    queries: 85,
                    books: 1230
                },
                tableData: [
                    { date: '2016-05-02', name: 'Tom', address: '上海市普陀区金沙江路 1518 弄' },
                    { date: '2016-05-04', name: 'Mike', address: '上海市普陀区金沙江路 1517 弄' }
                ],
                form: {
                    name: '',
                    region: ''
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('提交!', this.form);
            }
        },
        mounted() {
            var myChart = echarts.init(document.getElementById('gender-chart'));
            var option = {
                title: {
                    text: '男女占比',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                series: [
                    {
                        name: '性别',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            { value: 235, name: '男' },
                            { value: 135, name: '女' },
                            { value: 15, name: '其他' }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    });
</script>
</body>
</html>
